<template>
  <view class="map-selection-page">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <image class="back-icon" src="/static/images/common/ico_back.png" />
      </view>
      <text class="header-title">选择安装位置</text>
      <view class="header-right"></view>
    </view>

    <!-- 地图容器 -->
    <view class="map-container">
      <view class="map-placeholder">
        <image class="placeholder-icon" src="/static/images/common/ico_map.png" />
        <text class="placeholder-text">地图功能开发中...</text>
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <view class="bottom-action">
      <view class="confirm-button" @click="confirmLocation">
        <text class="confirm-text">确认位置</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedLocation: null
    }
  },
  onLoad(options) {
    console.log('地图选择页面参数:', options)
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    confirmLocation() {
      // 确认选择的位置
      uni.showToast({
        title: '位置确认成功',
        icon: 'success'
      })
      
      // 返回上一页
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  }
}
</script>

<style scoped>
.map-selection-page {
  background-color: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.header-left {
  width: 60px;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.header-title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.header-right {
  width: 60px;
}

/* 地图容器 */
.map-container {
  flex: 1;
  position: relative;
}

.map-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.placeholder-icon {
  width: 80px;
  height: 80px;
  opacity: 0.3;
}

.placeholder-text {
  font-size: 16px;
  color: #999999;
}

/* 底部确认按钮 */
.bottom-action {
  background-color: #ffffff;
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
}

.confirm-button {
  background-color: #00d4aa;
  border-radius: 25px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-text {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}
</style>